<template>
	<view class="cart-action-nav">
		<tar-checkbox style="height: 32rpx;" :value="allChecked" @input="allCheck"></tar-checkbox>
		<view class="info">
			<view>总计<text class="price-prefix">￥</text> <text class="price">{{total}}</text></view>
		</view>
		<fui-button radius="90px" type="danger" width="5rem" height="2rem" :disabled="allNotCheckd">结算</fui-button>
	</view>
</template>

<script>
	export default {
		name: "cart-action-nav",
		data() {
			return {};
		},
		computed: {
			total() {
				return this.$store.getters.cartsAmount
			},
			allChecked() {
				return this.$store.getters.allCartChecked
			},
			allNotCheckd(){
				return this.$store.getters.allCartNotChecked
			}
		},
		methods: {
			allCheck(value) {
				this.$store.commit('modifyAllCarts', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-action-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 0 28rpx;
		align-items: center;
		gap: 24rpx;
		padding: 8px 12px;
		border-top: 1px solid #eee;

		.info {
			flex: 1;

			.price {
				color: #fa4126;
				font-size: 36rpx;
			}

			.price-prefix {
				color: #fa4126;
				font-size: 24rpx;
				margin-left: .5em;
			}
		}

		.cart-sub-btn {
			width: 5rem;
		}
	}
</style>